
<template>
    <div>
        <layout-nav class-prefix="layout">
            <number-pad @update:value="onUpdatePad" @submit="saveRecord" />
            <Tabs :data-source="typeList" :value.sync="record.type" />
            <notes :value.sync="record.createdAt" type="date" fieldName="日期" placeHolder="请输入日期" />
            <notes :value.sync="record.notes" fieldName="备注" placeHolder="请输入备注" />
            <Tags @update:value="onUpdateTag" />
        </layout-nav>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import layoutNav from '../components/layoutNav.vue'
import numberPad from '@/components/money/numberPad.vue'
import Notes from '@/components/money/notes.vue'
import Tags from '@/components/money/tags.vue'
import { Component } from 'vue-property-decorator';
import Tabs from '@/components/Tabs.vue';
import typeList from '@/constants/typeList';


@Component({
    components: { layoutNav, numberPad, Notes, Tags, Tabs },
    computed: {
        tagList() {
            return this.$store.state.tagList;
        }
    }
})
export default class Money extends Vue {
    get recordList() {
        return this.$store.state.recordList
    }
    typeList = typeList
    record: RecordItem = {
        tags: [],
        notes: '',
        type: '-',
        amount: 0,
        createdAt: new Date().toISOString()
    };
    onUpdatePad(value: string) {
        this.record.amount = parseFloat(value)
    };
    onUpdateTag(value: []) {
        this.record.tags = value

    };
    created() {
        this.$store.commit('fetchRecords'),
            this.$store.commit('fetchTags')
    }
    saveRecord() {
        if(this.record.tags.length === 0){return alert("至少选取一个标签")}
        this.$store.commit('createRecords', this.record)
        alert("已保存")
        this.record.notes = ''
    }

}

</script>

<style lang="scss" scoped>
::v-deep .layout-content {
    display: flex;
    flex-direction: column-reverse;
}

</style>


